// 图片加载 出错使用默认图片替代，如果img src无值就使用默认图片或者传入的图片
import head from '@/assets/common/head.jpg'
import Vue from 'vue'
import employeesData from '@/api/constant/employees'
// const dirs = {
//   xxx: {},
//   errorimg: {
//     inserted(dom, obj, vnode) {
//       dom.src = dom.src || obj.value || head
//       dom.addEventListener('error', () => {
//         dom.src = obj.value || head
//       })
//     },
//     componentUpdated(dom, obj, vnode) {
//       dom.src = dom.src || obj.value || head
//     }
//   }
// }
// 对象循环  Object.keys()  Object.values()  Object.entries()

// const obj={a:'1',b:"2"}  Object.entries(obj)===>[['a','1'],['b','2']]
// Object.entries(dirs).forEach(arr => {
//   Vue.directive(arr[0], arr[1])
// })

// for (const key in dirs) {
//   Vue.directive(key, dirs[key])
// }

Vue.directive('errorimg', {
  inserted(dom, obj, vnode) {
    dom.src = dom.src || obj.value || head
    dom.addEventListener('error', () => {
      dom.src = obj.value || head
    })
  },
  componentUpdated(dom, obj, vnode) {
    dom.src = dom.src || obj.value || head
  }
})

// 状态数据转换指令
const fn = (dom, obj) => {
  // console.log('obj', obj)
  const findItem = employeesData[obj.arg].find(item => +item.id === +obj.value)
  dom.innerHTML = findItem ? findItem.value : '-'
}
Vue.directive('changestate', {
  //  bind
  //  inserted(dom,obj,vnode){  dom:指令所在dom  obj:{属性,修饰符,值(value)  vnode:{context:指令所在组件的this} } }
  //  update
  //  componentUpdated
  //  unbind
  inserted(dom, obj, vnode) {
    fn(dom, obj)
  },
  componentUpdated(dom, obj, vnode) {
    fn(dom, obj)
  }
})
// 聘用形式数据转换
// const fn2 = (dom, obj) => {
//   const findItem = employeesData.hireType.find(item => +item.id === +obj.value)
//   dom.innerHTML = findItem ? findItem.value : '-'
// }
// Vue.directive('changeemployment', {
//   //  bind
//   //  inserted(dom,obj,vnode){  dom:指令所在dom  obj:{属性,修饰符,值(value)  vnode:{context:指令所在组件的this} } }
//   //  update
//   //  componentUpdated
//   //  unbind
//   inserted(dom, obj, vnode) {
//     fn2(dom, obj)
//   },
//   componentUpdated(dom, obj, vnode) {
//     fn2(dom, obj)
//   }
// })

// 点击dom外执行一个事件
let fn2 = () => {}
Vue.directive('clickout', {
  inserted(dom, obj, vnode) {
    fn2 = (e) => {
      // 判断点击到dom外才执行事件
      if (!dom.contains(e.target)) {
        obj.value()
        // console.log('点击到dom外了')
      }
    }
    document.addEventListener('click', fn2)
  },
  unbind(dom, obj, vnode) {
    document.removeEventListener('click', fn2)
  }
})

